<template>
    <h-section title="业务需求分析" collapse>
        <div>
            <a-form layout="inline" :rules="rules" ref="ruleForm" :model="form">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="分析文档" name="selfRequestFiles">
                            <file-cell :fileList="form.selfRequestFiles" v-if="disabled" />
                            <upload-cell :fileParams="{ connectType: modelName, type: 0 }" :fileList="form.selfRequestFiles" @valueChange="fileChange" v-else />
                        </a-form-item>
                    </a-col>
                </a-row>
                <flexbox justify="flex-end" class="btn-group" v-if="!disabled">
                    <a-button type="primary" @click="handleSave">完成规划</a-button>
                </flexbox>
            </a-form>
        </div>
    </h-section>
</template>

<script lang="ts">
import UploadCell from '@/components/UploadCell/index.vue';
import FileCell from '@/components/FileCell/index.vue';
import { defineComponent, ref, unref, computed } from 'vue';
interface FormState {
    selfRequestFiles: Array<any>; // 受理文档
}
export default defineComponent({
    name: 'TaskRequireAnalyse',
    components: {
        UploadCell,
        FileCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        modelName: { type: String, default: '' }
    },
    setup(props, { emit }) {
        const ruleFormRef = ref<any>();
        const form = ref<FormState>({
            selfRequestFiles: []
        });
        const rules = computed(() => {
            const rules = {
                selfRequestFiles: [{ required: true, message: '业务需求分析文档不能为空', trigger: 'blur', type: 'array' }]
            };
            return props.disabled ? {} : rules;
        });
        const handleSave = () => {
            emit('save');
        };
        const validate = () => {
            return new Promise((resolve) => {
                unref(ruleFormRef)
                    .validate()
                    .then(
                        () => {
                            resolve(true);
                        },
                        () => {
                            resolve(false);
                        }
                    );
            });
        };
        // 监听文件删除等操作
        const fileChange = (fileList: any[]) => {
            form.value.selfRequestFiles = [...fileList];
        };
        const init = () => {
            Object.keys(unref(form)).forEach((key) => {
                if (key === 'selfRequestFiles') {
                    if (props.detail.selfRequestFiles) {
                        form.value.selfRequestFiles = props.detail.selfRequestFiles.filter((item) => item.connectType === props.modelName);
                    }
                } else {
                    form.value[key] = props.detail[key];
                }
            });
        };
        init();
        return {
            form,
            ruleFormRef,
            rules,
            handleSave,
            validate,
            fileChange
        };
    }
});
</script>
<style lang="less" scoped>
.extra-cont {
    margin-left: 12px;
    .extra-box {
        padding: 4px 8px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        color: #505a6e;
        .title {
            margin-left: 8px;
        }
    }
}
</style>